<!--
 * @Description: 全局定位组件，可根据鼠标移动决定位置，
 * @Author: wangchao
 * @Date: 2022-09-29 17:38:52
-->
<template>
  <div class="fixed-container" :style="myStyle">
    <slot />
  </div>
</template>
<script setup>// @ts-nocheck

  import { useMouse } from '@vueuse/core'
  const { x, y } = useMouse()

  const myStyle = computed(() => {
    let left = x.value + props.offset[0] + 'px',
      top = y.value + props.offset[1] + 'px'
    return { left, top }
  })

  const props = defineProps({
    // 偏移量
    offset: {
      type: Array,
      default: [20, -30],
    },
  })
</script>
<style scoped>
  @import '../index.scss';

  div {
    position: fixed;
    padding: 0.5em 1em;
    opacity: 0.9;
    background-color: #767272;
    color: #ffffff;
    border-radius: 20px;
    z-index: 999;
  }
</style>
